<template>
  <nav class="navbar">
    <router-link to="/" class="logo">
      <img src="../assets/logo.png" alt="积云码境空间" class="logo-img">
      <span class="logo-text">积云码境空间</span>
    </router-link>
    <div class="nav-links">
      <router-link 
        v-for="item in categories" 
        :key="item.id" 
        :to="{ path: '/courses', query: { category: item.name }}"
        class="nav-item"
        :style="{ color: item.is_active ? item.theme_color : '#999' }"
      >
        {{ item.display_name }}
      </router-link>
    </div>
    <div class="user-actions">
      <router-link to="/cart" class="cart">
        <i class="shopping-cart-icon"></i>
        购物车
        <span v-if="cartCount > 0" class="cart-count">{{ cartCount }}</span>
      </router-link>
      <router-link to="/user-center" class="user-center">
        <i class="user-icon"></i>
        学习中心
      </router-link>
      <router-link to="/login" class="login">登录</router-link>
      <router-link to="/register" class="register">注册</router-link>
    </div>
  </nav>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

import { useRouter } from 'vue-router'

const router = useRouter()

const categories = ref([])
const cartCount = ref(1) // 购物车商品数量

const fetchCategories = async () => {
  try {
    const response = await axios.get('http://127.0.0.1:8000/api/nav/categories/')
    if (response.data.code === 1) {
      // 根据 weight 排序
      categories.value = response.data.data.sort((a, b) => a.weight - b.weight)
    } else {
      console.error('获取导航分类失败:', response.data.message)
    }
  } catch (error) {
    console.error('请求导航分类出错:', error)
  }
}

const goHome = () => {
  console.log('goHome')
  router.push('/')
}

onMounted(() => {
  fetchCategories()
})
</script>

<style scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 1000;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 40px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

.logo:hover {
  opacity: 0.8;
}

.logo-img {
  height: 32px;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.nav-links {
  display: flex;
  gap: 50px;
  flex: 1;
  justify-content: center;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  transition: color 0.3s;
  position: relative;
}

.nav-item:hover {
  opacity: 0.8;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 200px;
  justify-content: flex-end;
}

.cart, .login, .register {
  text-decoration: none;
  color: #333;
}

.register {
  color: #1890ff;
}

.cart {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff4d4f;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shopping-cart-icon {
  font-family: "Material Icons";
  content: "shopping_cart";
}

.user-center {
  color: #666;
}

.user-center:hover {
  color: #1890ff;
}

.user-icon {
  font-family: "Material Icons";
  content: "person";
}
</style> 